import React, { PureComponent } from 'react'
import styles from './index.module.css'
import Slider from "react-slick";


/**
 * 安装
 * 1、yarn add react-slick
 * 2、yarn add slick-carousel
 *    导入import "slick-carousel/slick/slick.css";  import "slick-carousel/slick/slick-theme.css";
 * 3、使用
 * https://react-slick.neostack.com/docs/get-started
 */

export default class SwiperSlick extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      currentIndex: 0
    }
  }
  render() {
    var settings = {
      dots: true,
      infinite: true,
      arrows: false,
      speed: 200,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      appendDots: dots => (
        <div>
          <ul className={styles.dot_ul}> {dots} </ul>
        </div>
      ),
      customPaging: i => (
        <div className={`${styles.custom_page} ${this.state.currentIndex === i ? styles.custom_page_active : ''}`}>{i + 1}</div>
      ),
      afterChange: i => (
        this.setState({
          currentIndex: i
        })
      )
    };
    return (
      <div className={styles.slider_container}>
        <Slider {...settings}>
          <div>
            <img src="https://picsum.photos/800/400" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/800/400" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/800/400" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/800/400" alt="" />
          </div>
        </Slider>
      </div>
    )
  }
}
